import { Position, type NodeProps } from "reactflow";
import CustomHandle from "./CustomHandle";

const DynamicHandle = ({ logicList }: { logicList: string[] }) => {
  return (
    <div className="flex flex-col">
      {logicList.map((logic, index) => (
        <div key={index} className="flex items-center">
          <CustomHandle
            type="source"
            position={Position.Right}
            id={`${logic}-${index}`}
            style={{ top: `${(index + 1) * 20 + 50}px` }}
          />
          <div className="text-gray-500 text-sm ml-2">{logic}</div>
        </div>
      ))}
    </div>
  );
};

// If/Else节点组件
const IfElseNode = ({ data, selected }: NodeProps) => {
  return (
    <div
      className={`px-4 py-2 max-w-sm shadow-md rounded-md bg-gray-200 border-5 ${selected ? " border-purple-600" : "border-transparent"} `}
    >
      <div className="flex items-center">
        <div className="rounded-full w-12 h-12 flex items-center justify-center bg-stone-100">
          {/* 节点图标 */}
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
          >
            <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
          </svg>
        </div>
        <div className="ml-2">
          <div className="text-gray-500 text-lg font-bold">If/Else</div>
        </div>
      </div>

      {/* 输入连接点 */}
      <CustomHandle type="target" position={Position.Left} />

      <DynamicHandle logicList={data.logicList || []} />
    </div>
  );
};

export default IfElseNode;
